<template>
    <div class="show-contain"
         :class="[compOption.isClick && mode == 'sheji' ? 'active-bordert' : '',mode == 'sheji' ? 'widget-item' : '']"
         @click.stop="clickToggleBg">
        <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px">
            <div class="required-title" v-if="mode != 'sheji' && compOption.options.required">*</div>
            <div class="sort-style" v-if="prentCompOption.isChildSort && prentCompOption.isPrentAndChildSort">
                {{ prentCompOption.sortTitle + '.' + (childInd + 1) }}
            </div>
            <div class="sort-style" v-else-if="prentCompOption.isChildSort">{{ childInd + 1 }}</div>
            <div class="sort-style" v-else-if="prentCompOption.isPrentAndChildSort">{{ prentCompOption.sortTitle }}
            </div>
            <div class="title-openEdit" @click.stop="openTitleEditor(compOption.displayName)"
                 v-html="mode == 'sheji' ? compOption.displayName : compOption.displayName + ((!compOption.options.hasOwnProperty('totalSource') || compOption.options.totalSource == 0) ? '' :  ` <span style='width:80px;align-self: flex-end'>(${compOption.options.totalSource}) 分</span>`)"
                 :style="{border:mode == 'sheji' ? '1px solid rgba(204, 200, 200, 0.5)' : 'none',padding:mode == 'sheji' ? '10px' : '0',
           }" style="font-size: 18px"></div>
            <div style="margin-left: 10px" v-if="compOption.isClick && mode == 'sheji'">
                <div class="flex-row">
                    <!--                    <span class="el-icon-rank font-color-main" style="margin-right: 10px"></span>-->
                    <!--                    <span class="el-icon-document-copy font-color-main" style="margin-right: 10px"></span>-->
                    <span class="el-icon-delete font-color-main" @click="delSourceZu"></span>
                </div>
            </div>
        </div>
        <div  style="margin-bottom: 10px;width: 100%" v-if="mode == 'yulan' && (compOption.options.score !==null && compOption.options.score != '不适用')">
            <el-row style="display: flex;align-items: center">
                <el-col :span="1">
                    <div>已得</div>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="compOption.options.score"  class="el-border-dev"
                              :disabled="sourceMode == 'yulan'"></el-input>
                </el-col>
                <el-col :span="2">
                    <div>分</div>
                </el-col>
            </el-row>
        </div>
        <div v-if="compOption.options.questionStem" :style="{marginBottom: mode == 'sheji' ? '10px' : '20px'}"
             style="width: 100%">
            <el-input v-model="compOption.options.placeholderContent" v-if="mode == 'sheji'"
                      placeholder="请输入题干说明"
                      style="width: 100%"></el-input>
            <div v-else class="tigan">
                {{ compOption.options.placeholderContent }}
            </div>
        </div>

        <div style="border: 1px solid rgba(222,216,216,0.8);height: 100px;display: flex;width: 100%;justify-content: center;align-items: center;
border-radius: 5px;background: rgb(237,248,250);cursor: pointer"
             v-if="!compOption.options.isGetMap">
            <span class="iconfont icon-diliweizhi" style="color: #409eff"></span>
            <div style="margin-left: 5px" @click="getLocation">点击获取你的地理位置</div>
        </div>
        <div v-else style="width: 100%">
            <div :id="compOption.id + 'amap'" class="amap-container"></div>
        </div>
        <dialog-editor ref="dialogEditor" @throwHtml="(html) => compOption.displayName = html"></dialog-editor>
    </div>
</template>

<script>
import {openEditor} from '@/minexs/index'
import {methodRef} from '@/components/form-designer/widget-panel/main-comp-panal/methodRef'
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
    name: "diliweizhi-editor",
    mixins: [openEditor, methodRef],
    props: {
        compOption: {
            type: Object,
        },
        prentCompOption: {
            type: Object,
        },
        childInd: {
            type: Number
        },
        mode: {
            type: String,
            default: 'sheji'
            /**
             * sheji
             * xiezuo
             * yulan
             * */
        },
        sourceMode: {
            type: String,
            default: 'yulan'
        }
    },
    data() {
        return {
            map: null, // 地图实例
            markers: [], // 标记点数组
            currentPosition: null, // 当前位置
            center: {lng: 116.397470, lat: 39.908823}
        }
    },
    mounted() {
        if (this.compOption.options.isGetMap) {
            this.$nextTick(() => {
                this.initMap();
            })
        }
    },
    methods: {
        clickToggleBg() {
            if (this.$props.mode == 'sheji') this.$emit('changeClick', this.$props.compOption.id, this.$props.prentCompOption.id)
        },
        changeValue() {
            if (this.compOption.options.onChangeValue) {
                this.$emit('activeStartChange', {
                    code: this.compOption.options.onChangeValue,
                    value: this.compOption.options.value
                })
            }
        },
        delSourceZu() {
            this.$confirm('是否确认删除当前问题', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ind = this.prentCompOption.widgetList.findIndex(item => item.id == this.compOption.id)
                if (ind != -1) {
                    this.prentCompOption.widgetList.splice(ind, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
            })
        },
        initMap() {
            try {
                this.map = new AMapLoader.load({
                    key: 'a2e20113bfb55d869fcd26d40a060f0a',
                    plugins: []
                }).then((AMap) => {
                    this.map = new AMap.Map(this.compOption.id + "amap", {
                        viewMode: "2D", // 是否为3D地图模式
                        zoom: 15, // 初始化地图级别
                        resizeEnable: true,
                    });
                    const _that = this
                    AMap.plugin('AMap.Geolocation', function () {
                        var geolocation = new AMap.Geolocation({
                            // 是否使用高精度定位，默认：true
                            enableHighAccuracy: true,
                            // 设置定位超时时间，默认：无穷大
                            timeout: 10000,
                            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                            buttonOffset: new AMap.Pixel(10, 20),
                            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                            zoomToAccuracy: true,
                            //  定位按钮的排放位置,  RB表示右下
                            buttonPosition: 'RB'
                        })
                        geolocation.getCurrentPosition()
                        AMap.event.addListener(geolocation, 'complete', onComplete)
                        AMap.event.addListener(geolocation, 'error', onError)
                        function onComplete(data) {
                            // data是具体的定位信息
                            if (data) {
                                if(_that.mode == 'xiezuo'){
                                    _that.compOption.options.jingdu = data.position.lng
                                    _that.compOption.options.weidu = data.position.lat
                                    const position = new AMap.LngLat(data.position.lng,data.position.lat); //Marker 经纬度
                                    const markerContent = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn">X</div>
</div>`
                                    const marker = new AMap.Marker({
                                        position: position,
                                        content: markerContent, //将 html 传给 content
                                        offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                                        zIndex:400
                                    });
                                    console.log(_that.map,'_that.map')
                                    _that.map.setCenter(position)
                                    _that.map.add(marker);
                                }
                                else if(_that.mode == 'yulan'){
                                    const position = new AMap.LngLat(_that.compOption.options.jingdu,_that.compOption.options.weidu); //Marker 经纬度
                                    const markerContent = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn">X</div>
</div>`
                                    const marker = new AMap.Marker({
                                        position: position,
                                        content: markerContent, //将 html 传给 content
                                        offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                                        zIndex:400
                                    });
                                    _that.map.setCenter(position)
                                    _that.map.add(marker);
                                }
                            }
                        }

                        function onError(data) {
                            // 定位出错
                            console.log(data, 'data')
                        }
                    })
                }).catch(e => {
                    console.log(e)
                })
            } catch (e) {
                console.log(e, '外围e')
            }
            // // 监听地图点击事件
            // this.map.on('click', (e) => {
            //     this.currentPosition = { lng: e.lnglat.getLng(), lat: e.lnglat.getLat() };
            // });
        },

        //获取用户地理位置
        getLocation() {
            if (this.mode == 'sheji') return
            this.compOption.options.isGetMap = true
            this.$nextTick(() => {
                this.initMap()
            })
        }
    }
}
</script>

<style scoped>
.widget-item {
    border: .5px solid #e5e5e5;
    border-radius: 3px;
    padding: 20px;
}

.amap-container {
    position: relative;
    width: 100%;
    height: 300px;
}

.custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
}

.custom-content-marker img {
    width: 70%;
    height: 70%;
}

.custom-content-marker .close-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover{
    background: #666;
}
</style>
